<template>
    <div class="component-bottom-popup-select" v-if="value">
        <van-actionsheet :value="true">
            <div class="select-box">
                <div class="app-box">
                    <div class="app-item">
                        <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1537628769&di=a0fe6c10911c588c1018de104b983ca4&src=http://www.sj520.cn/sc/ima/weixin_sj520_25.jpg" alt="">
                        <span>微信</span>
                    </div>
                </div>
                <div class="close" @click="handleClose">取消</div>
            </div>
        </van-actionsheet>
    </div>
</template>

<style lang="less" scoped>

    @import '../style/variable';

    .component-bottom-popup-select{
        .select-box{
            .app-box{
                padding: 2.1rem .9rem;
                .app-item{
                    width: 6rem;
                    margin: 0 .6rem;
                    text-align: center;
                    img{
                        display: block;
                        width: 6rem;
                        height: 6rem;
                    }
                    span{
                        font-size: 1rem;
                        margin-top: 1rem;
                        color: @color-text-gray;
                    }
                }
            }

            .close{
                text-align: center;
                font-size: 1.8rem;
                line-height: 4.8rem;
                border-top: .8rem solid @color-bg-gray;
            }
        }

    }
</style>

<script>
    export default {
        props: ['items', 'value'],
        methods: {
            handleClose(){
                this.$emit('input', false);
            },
            handleSelect(key){
                this.$emit('onselect', key);
                this.handleClose();
            }
        }
    }
</script>